---
title: "RefreshButton"
description: "A button component for refreshing data with keyboard shortcuts and live mode support"
---
import { Default, WithLiveMode, DisabledState } from "./refresh-button.examples";

## Overview

The RefreshButton component offers built-in keyboard-shortcut support and live-mode toggling. It handles refresh operations with visual feedback, keyboard navigation, and robust accessibility features.
## Features

- **Keyboard Shortcut**: Built-in support for ⌥+⇧+R (Option+Shift+R) shortcut
- **Loading States**: Visual feedback during refresh operations with a 1-second timeout
- **Live Mode Integration**: Automatic handling of live mode toggling during refresh
- **Accessibility**: Full keyboard navigation and screen reader support
- **Tooltip Integration**: Contextual help when refresh is unavailable
- **Visual Feedback**: Clear indication of refresh status and availability

## Basic Usage

The most common use case is a simple refresh button that calls a refresh function when clicked or when the keyboard shortcut is pressed.

<Default />

## With Live Mode

When used in contexts with live data streaming, the RefreshButton can automatically manage live mode state during refresh operations.

<WithLiveMode />

## Disabled State

The button can be disabled when refresh is not available, typically when no relative time filter is selected.

<DisabledState />

## Props

| Prop | Type | Description |
|------|------|-------------|
| `onRefresh` | `() => void` | Function called when refresh is triggered |
| `isEnabled` | `boolean` | Whether the refresh functionality is available |
| `isLive`    | `boolean?`                    | Current live mode state (optional) |
| `toggleLive?` | `(value: boolean) => void`    | Function to toggle live mode      |

## Keyboard Shortcuts

The RefreshButton automatically registers the following keyboard shortcut:

- **⌥+⇧+R** (Option+Shift+R): Triggers the refresh operation

The shortcut is only active when `isEnabled` is true and the button is not in a loading state.

## Behavior

### Refresh Flow

1. **Click or Shortcut**: User clicks the button or presses ⌥+⇧+R
2. **Live Mode Handling**: If live mode is enabled, it's temporarily disabled
3. **Loading State**: Button shows loading indicator for 1 second
4. **Refresh Execution**: The `onRefresh` function is called
5. **State Restoration**: After timeout, live mode is restored if it was previously enabled

### Disabled State

When `isEnabled` is false:
- Button appears disabled
- Tooltip shows "Refresh unavailable - please select a relative time filter in the 'Since' dropdown"
- Keyboard shortcut is disabled
- No refresh operations can be triggered

### Loading State

During refresh operations:
- Button shows a loading spinner
- Text remains visible, but the button is non-interactive
- Keyboard shortcut is disabled
- Live mode is temporarily disabled if enabled